<template>
<div :hidden="options.hidden">
<el-form-item :label="def.name" :class="[$style.container]">
  <el-button type="primary" size="mini" @click="visible=true">{{options.text}}</el-button>
  <div :class="[$style.body, designCls]">
    <draggable
      v-if="design"
      :value="def.list"
      @input="onInput($event, def)"
      tag="div"
      :class="[$style.col]"
      :no-transition-on-drag="true"
      v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
    >
      <form-control v-for="item in def.list" :key="item.key" :def="item" :design="design"></form-control>
    </draggable>
    <template v-else>
      <el-dialog :title="options.text" :visible.sync="visible" :width="options.width">
        <form-control :row-form-data="value" v-for="item in def.list" :key="item.key" :def="item" :design="design"></form-control>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</el-form-item>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Inject, Watch, Provide } from 'vue-property-decorator'
import { FieldModalDefinition, FieldModalOptions } from '@/components/type'
import draggable from 'vuedraggable'

@Component({
  components: {
    draggable,
    'form-control': () => import('@/components/form-instance/form-control/index.vue')
  }
})
export default class ModalControl extends Vue {
  @Prop() def!: FieldModalDefinition

  @Inject() getDesign!: () => boolean

  @Inject() getFormData!: () => Record<string, any>

  @Inject() getRowFormData!: () => Record<string, any>

  @Inject() getEdit!: () => boolean

  visible = false

  get design () {
    return this.getDesign()
  }

  get designCls () {
    return this.design ? this.$style.design : ''
  }

  get options (): FieldModalOptions {
    return this.def.options
  }

  get edit () {
    return this.getEdit()
  }

  get disabled () {
    if (!this.edit) return true
    return this.options.disabled
  }

  get model () {
    return this.def.model
  }

  get formData () {
    return this.getRowFormData() || this.getFormData()
  }

  get value () {
    return (this.formData && this.formData[this.model]) || {}
  }

  onInput (list: any, row: any) {
    row.list = list || []
  }

  $style!: any
}
</script>

<style lang="scss" module>
.col {
  position: relative;
  z-index: 100;
}

.design {
  margin: 4px;
  & .col {
    min-height: 50px;
    border: 1px dashed #ccc;
    background: #fff;
  }
}

.container {
}

.header {
  font-size: 14px;
}

.body {
  background-color: #fff;

  &.design {
    padding: 16px 12px;
  }
}
</style>
